import React, { Component } from 'react'
import "./TodoFooter.css";

//Array.prototype.every 
export default class TodoFooter extends Component {
  render() {
    //数量的获取
    //总数
    let total = this.props.todos.length;
    //完成 数量
    let doneTotal = this.props.todos.filter(item => item.done).length;
    //解构赋值
    let {todos} = this.props;
    return (
        <div className="todo-footer">
            <label>
                <input type="checkbox" onChange={this.change} checked={todos.every(item=> item.done) && todos.length > 0} />
            </label>
            <span> <span>已完成 {doneTotal}</span> / 全部 {total} </span>
            <button className="btn btn-danger" onClick={this.props.removeAllDoneTodos}>清除已完成任务</button>
        </div>
    )
  }

  change = (e) => {
    this.props.checkAllTodos(e.target.checked);
  }
}
